<template>
  <el-dialog :visible.sync="dialogVisible" :fullscreen="true">
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>代号</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="currentRolemodel.Code"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>名称</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="currentRolemodel.Name"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>备注</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="currentRolemodel.Note"></el-input>
      </el-col>
    </el-row>
    <div>
      <RoleGridEditor ref="rge" :rowData="currentRoleDetail"/>
    </div>
    <div
      slot="title"
      style="border-bottom: 1px dashed #dcdfe6;font-size: larger;padding-bottom: 10px;"
    >
      <span>数据管理</span>
      <hr style="border:1 dashed " width="100%" color="#DCDFE6" size="1">
      <div>
        <el-button-group>
          <el-button
            size="mini"
            type="primary"
            :disabled="!this.$route.meta.create"
            @click="onSubmit"
          >保存</el-button>
          <el-button
            size="mini"
            :disabled="this.rolemodel.AutoId === undefined || this.rolemodel.AutoId === 0||!this.$route.meta.delete"
            @click="onDelete"
          >删除</el-button>
        </el-button-group>

        <el-button-group>
          <el-button size="mini" @click="pickerVisible = true">增行</el-button>
          <el-button size="mini" :disabled="currentRoleDetail.length===0" @click="rmRow">删行</el-button>
        </el-button-group>
        <el-button-group>
          <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
        </el-button-group>
      </div>
    </div>
    <el-dialog :visible.sync="pickerVisible" :modal="false">
      <ModulePicker
        :multiple="true"
        :autoset="true"
        @confirm="addRow"
        @ignore="pickerVisible=false"
      />
    </el-dialog>
  </el-dialog>
</template>
<script>
import { delRole, setRole, get } from '@/api/role'
import { Model } from 'vue-property-decorator'
import RoleGridEditor from '@/components/GridEditor/RoleGridEditor.vue'
import ModulePicker from '@/components/DataPicker/ModulePicker.vue'
export default {
  components: { RoleGridEditor, ModulePicker },
  data() {
    return {
      dialogVisible: false,
      pickerVisible: false,
      currentRolemodel: this.rolemodel,
      currentRoleDetail: []
    }
  },
  props: { rolemodel: Object },
  watch: {
    rolemodel: function(value) {
      this.currentRolemodel = value
      if (this.currentRolemodel && this.currentRolemodel.AutoId > 0) {
        get(this.currentRolemodel.AutoId)
          .then(response => {
            if (response.Result === 0) {
              this.currentRoleDetail = response.Detail
            } else {
              this.$alert(response.Message, '获取数据失败')
            }
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        this.currentRoleDetail = []
      }
    }
  },
  methods: {
    onSubmit() {
      setRole(this.currentRolemodel, this.currentRoleDetail)
        .then(response => {
          if (response.Result === 0) {
            this.currentRolemodel = response.Data
            this.currentRoleDetail = response.Detail
            this.$message('保存成功')
            this.regDisable = false
            this.$emit('roleSaveComplete', this.currentRolemodel)
          } else {
            this.$alert(response.Message, '失败')
          }
        })
        .catch(error => {
          // this.$alert(error, '错误')
        })
    },
    onDelete() {
      this.$confirm('此操作将删除档案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delRole(this.currentRolemodel)
            .then(response => {
              if (response.Result === 0) {
                this.$message('删除成功')
                this.dialogVisible = false
                this.$emit('roleDelComplete', this.currentRolemodel.AutoId)
                this.currentRolemodel = {}
                this.currentRoleDetail = []
              } else {
                this.$alert(response.Message, '失败')
              }
            })
            .catch(error => {
              // this.$alert(error, '错误')
            })
        })
        .catch(() => {})
    },
    addRow(modules) {
      for (let midx in modules) {
        let minTmpid = 0
        let skip = false
        for (let idx in this.currentRoleDetail) {
          if (
            this.currentRoleDetail[idx].minTmpid &&
            this.currentRoleDetail[idx].minTmpid < minTmpid
          ) {
            minTmpid = this.currentRoleDetail[idx].minTmpid
          }
          if (this.currentRoleDetail[idx].Module === modules[midx].AutoId) {
            this.$message('modules=' + modules[midx].Name + '已存在')
            skip = true
            break
          }
        }
        if (skip) {
          continue
        }
        this.currentRoleDetail.push({
          AutoId: 0,
          minTmpid: minTmpid - 1,
          Role: this.currentRolemodel.AutoId,
          Module: modules[midx].AutoId
        })
      }
      this.pickerVisible = false
    },
    rmRow() {
      const selectedData = this.$refs.rge.getSelected()
      console.log(selectedData)
      if (selectedData.length === 0) {
        this.$message('请先选中需要删除的行')
        return
      }
      this.$confirm(
        '将会删除' + selectedData.length + '笔记录, 是否继续?',
        '提示',
        { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
      )
        .then(() => {
          for (let idx in selectedData) {
            for (let rIdx in this.currentRoleDetail) {
              if (
                (selectedData[idx].minTmpid &&
                  this.currentRoleDetail[rIdx].AutoId) ||
                selectedData[idx].AutoId === this.currentRoleDetail[rIdx].AutoId
              ) {
                this.currentRoleDetail.splice(rIdx, 1)
                break
              }
            }
            console.log(this.currentRoleDetail)
          }
        })
        .catch(error => {})
    }
  }
}
</script>

<style>
.el-span-c {
  padding: 5px;
  height: 40px;
  width: 100px;
  line-height: 30px;
  text-align: right;
}
.el-input-normal-c {
  width: 300px;
  height: 40px;
  text-align: left;
}
.el-input-large-c {
  width: 500px;
  height: 40px;
  text-align: left;
}
.el-low-c {
  height: 40px;
  margin-bottom: 15px;
  text-align: left;
}
</style>


